<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>传悦案例</title>
	<link rel="stylesheet" href="css/demo.css">
	<link rel="stylesheet" href="font_2234222_8n5f3cu5q0b/iconfont.css">
</head>
<body>
	<nav>
		<div class="nav-con">
			<div class="nav-log"></div>
			<ul class="text">
				<li><a href="index.html">网站首页</a></li>
				<li><a href="#">传悦资源</a></li>
				<li class="now"><a href="demo.html">传悦案例</a></li>
				<li><a href="solve.html">解决方案</a></li>
				<li><a href="#">需求提交</a></li>
			</ul>
			<ul class="icon">
				<li><span class="iconfont icon-dianhua">0535-60652189</span></li>
				<li><span class="iconfont icon-qq"></span></li>
				<li><span class="iconfont icon-xinlang"></span></li>
				<li><span class="iconfont icon-youxiang"></span></li>
				<li><span class="iconfont icon-youxiang1"></span></li>
			</ul>
		</div>
	</nav>
	<section>
		<div class="bot">
			<div class="bot-con">
				网站资源 > 传悦案例
			</div>
		</div>
	</section>
	<main>
		<div class="main-con">
			<ul class="alltitle">
				<li class="color">全部</li>
				<li>网站建设</li>
				<li>推广运营</li>
				<li>品牌策划</li>
				<li>网络全案</li>
			</ul>

			<ul class="list">
			</ul>
			<li id="template">
				<a href="demo-content.html">
					<div class="img">
						<img src="" alt="图片加载失败">
					</div>
					<div class="text">
						<p class="p1"></p>
						<p class="p2"><span></span><span></span><span></span></p>
					</div>
				</a>
			</li>
			<ul class="num">
				<li><</li>
				<li>1</li>
				<li class="now">2</li>
				<li>3</li>
				<li>4</li>
				<li>></li>
			</ul>
		</div>
	</main>
	<footer>
		<div class="foot-con">
			<ul>
				<li>关于传悦</li>
				<li>新闻动态</li>
				<li>传悦观点</li>
				<li>加入传悦</li>
				<li>联系传悦</li>
				<li>付款账户</li>
			</ul>
			<p>Copyright &copy;2013 创梦网络科技有限责任公司 || 传悦 Chnyoo.cn All Right Reserved 京ICP备12005221号</p>
		</div>
	</footer>



	<script>
		let template = document.querySelector("#template");
		let list = document.querySelector(".list");

		let table = document.querySelector(".alltitle");
		table.onclick = function(event){
			_this = event.target;
			liList = table.querySelectorAll("li");
			for(let i = 0; i < liList.length; i++){
				liList[i].className = "";
			}
			if(_this.tagName === "LI"){
				_this.className = "color";
			}
		}

		let http = new XMLHttpRequest();
	  	http.open("get","http://10.35.164.241:81/flightItem");
	  	http.send();
	  	http.onreadystatechange = function(){
	  		if(http.readyState === 4){
	  			let demoList = JSON.parse(http.responseText);
	  			demoList.forEach(function(item,index){
	  				let nowItem = template.cloneNode(true);
	  				nowItem.id = "";
	  				list.appendChild(nowItem);
	  				nowItem.querySelector("img").setAttribute("src",`img/img/${item.src}`);
	  				nowItem.querySelector(".p1").innerHTML = item.title;
	  				nowItem.querySelector(".p2").querySelectorAll("span")[0].innerHTML = item.title1;
	  				nowItem.querySelector(".p2").querySelectorAll("span")[1].innerHTML = item.title2;
	  				nowItem.querySelector(".p2").querySelectorAll("span")[2].innerHTML = item.title3;
	  				nowItem.setAttribute("data-id",item.id);


	  				nowItem.onclick = function(){
						let id = nowItem.getAttribute("data-id");
						let http = new XMLHttpRequest();
						http.open("get",`http://10.35.164.241:81/demoItem?id=${id}`);
						http.send();
						http.onreadystatechange = function(){
							if(http.readyState === 4){
								console.log(id);
							}
						}
					}
	  			})
		  	}
		}
	</script>
</body>
</html>
